<style scoped lang="less">
.luck {
  padding: 92px 0 50px;
}
</style>

<template>
  <div class="luck">
    <top-bar></top-bar>
    <!-- <img v-for="skin in pageData.topSkinList" :src="skin.userImage" :key="skin.id" alt=""> -->
    <scroll v-if="pageData.topSkinList.length" :list='pageData.topSkinList'></scroll>
    <manghe></manghe>
  </div>
</template>
<script>
import { useRoute } from "vue-router";
import { onMounted, reactive, ref } from 'vue'
import { topSkin, skinGoodsDetail, skinHistoryDetail } from '../../api/home.js'
import manghe from '../../components/manghe.vue'
import scroll from '../../components/scroll.vue'


export default {
  name: 'luck',
  components: { manghe,scroll },
  setup() {
    const route = useRoute()
    const pageData = reactive({
      topSkinList: [],
      skinGoodsList: [],
      skinHistoryList: [],
      // skinDetails: {}
    })
    let goodsPage = ref(1)
    let historyPage = ref(1)
    let historyPageTotal = ref(1)
    let goodsPageTotal = ref(1)
    const getTopSkin = async () => {
      const res = await topSkin()
      if (res.code === 200) {
        pageData.topSkinList = reactive(res.data)
      }
    }
    // const getSkinDetail = async () => {
    //   const res = await skinDetail(route.query.id)
    //   if (res.code === 200) {
    //     pageData.skinDetails = res.data
    //   }
    // }

    const getGoodsDetail = async () => {
      const res = await skinGoodsDetail({
        id: route.query.id,
        pageNum: goodsPage.value,
        pageSize: 10
      })
      if (res.code === 200) {
        pageData.skinGoodsList = res.data.blindBoxDetailsList.content
        goodsPageTotal.value = res.totalPages
      }
    }

    const getHistoryDetail = async () => {
      const res = await skinHistoryDetail({
        id: route.query.id,
        pageNum: historyPage.value,
        pageSize: 10
      })
      if (res.code === 200) {
        pageData.skinHistoryList = res.data.content
        historyPageTotal.value = res.totalPages
      }
    }

    onMounted(() => {
      getTopSkin()
      // getSkinDetail()
      getGoodsDetail()
      getHistoryDetail()
    })
    return { 
      pageData,
      historyPageTotal,
      goodsPageTotal
    }
  }
}

</script>